<template>
  <div class='container'>
    <el-card >
  <el-col :span="18">
          <el-form label-width="80px" size="small" :inline="true">
            <el-form-item  label="关键字">
              <el-input class="input" v-model="query.keyword" placeholder="根据编号搜索"></el-input>
            </el-form-item>
          </el-form>
  </el-col>
  <el-col :span="6" style="text-align:right">
              <el-button @click="clear" size="small">清除</el-button>
              <el-button @click="onSubmit" type="primary" size="small">搜索</el-button>
  </el-col>
      <!-- 数据记录 -->
        <el-alert :title="`数据一共${total}条`" style="margin-bottom:15px" type="info" :closable="false" show-icon>
      </el-alert>

  <!-- 表格区域 -->
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      prop="id"
      label="编号"
      width="220">
    </el-table-column>

    <el-table-column
      label="题型"
      width="100"
     >
      <template slot-scope="scope">
        {{format(scope.row.questionType)}}
      </template>
    </el-table-column>

    <el-table-column
      label="题目编号"
      width="220">
      <template slot-scope="scope">
        <p v-for="(item,index) in scope.row.questionIDs" :key="index" class="timu" @click="dialog(item.id)">
          {{item.number}}
        </p>
      </template>
    </el-table-column>
    <el-table-column
      prop="addTime"
      label="录入时间"
      width="220">
    </el-table-column>
    <el-table-column
      prop="totalSeconds"
      label="答题时间(s)">
    </el-table-column>
    <el-table-column
      prop="accuracyRate"
      label="正确率(%)"
      >
    </el-table-column>
    <el-table-column
      prop="userName"
      label="录入人"
      >
    </el-table-column>

    <el-table-column

      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button
          @click="deleteRow(scope.row.id)"
          type="danger"
          icon="el-icon-delete"
          size="small"
          circle
           plain
          >
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 跳转分页 -->
 <el-pagination
 background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="query.page"
      :page-sizes="[20,30,50,100]"
      :page-size="query.pagesize"
      layout="prev, pager, next,sizes,jumper"
       :total="total"
       class="page-right"
       >
    </el-pagination>
    </el-card>
  <Preview  :show-dialog='showdialog' @close-dialog='closeDialog' :number="number"></Preview>
  <!-- 使用组件 -->
  </div>
</template>

<script>

import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'// 引入组题列表，删除，题目
import Preview from '@/module-hmmm/components/articles-previewe.vue'// 引入组件
import { questionType } from '@/api/hmmm/constants'// 枚举
export default {
  components: {
    Preview// 引入组件使用
  },
  data () {
    return {
      showdialog: false, // 默认弹层关闭
      total: 0, // 页数和显示条数得总和
      tableData: [], // 把数据存到这个1数组里，然后渲染
      query: { // 页数与表单数据
        page: 1,
        pagesize: 20,
        keyword: ''
      },
      number: {}// 把数据存进来
    }
  },
  mounted () {
    this.hRandoms()// 定义一个函数
  },
  methods: {
    //   关闭弹窗
    closeDialog () {
      this.showdialog = false
      this.number = ''
    },
    // 点击删除
    deleteRow (id) {
      console.log('删除', id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await removeRandoms({ id })
        console.log('删除数据', res)
        // rows.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.hRandoms()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 渲染列表表格数据
    async hRandoms () {
      const res = await randoms(this.query)
      console.log('表格数据', res)
      this.tableData = res.data.items
      this.total = res.data.counts
      // console.log(res.data.items)
    },
    // 筛选题型，分为3种
    format (diff) {
      const map = {}
      questionType.forEach(item => {
        map[item.value] = item.label
      })
      return map[diff]
    },
    // 每页条数跳转
    handleSizeChange (pagesize) {
      // console.log(`每页 ${pagesize} 条`)
      this.query.pagesize = pagesize
      this.hRandoms()
    },
    // 跳转页面
    async handleCurrentChange (page) {
      // 跳转的页数的第几页
      this.query.page = page
      //   刷新页面
      this.hRandoms()
    },
    // 点击搜索
    onSubmit () {
      console.log('点击了搜索')

      this.hRandoms()
    },
    // 点击清空
    clear () {
      // 点击清空，给个空值
      this.query.keyword = ''
      //   刷新页面加载
      this.hRandoms()
      console.log('点击了清空')
    },
    // 获取题库列表数据
    async dialog (id) {
      this.showdialog = true
      const res = await detail({ id })// 获取数据
      console.log('获取题库列表', res)
      this.number = res.data// 拿数据
    //   this.number = ''
    }
  }
}
</script>

<style scoped>
.container{
  margin: 10px;
}
.el-icon-info{
  margin-right: 10px;
}
.page-right{
  float:right;
  margin: 30px 0;
}
.timu{
  margin: 0;
  padding: 0;
  color: dodgerblue;
  cursor:pointer;
}
.el-alert__icon.is-big {
    font-size: 28px;
}
.btnRight{
  float: right;
}
.input{
  width: 335px;
}
</style>
